<template>
  <div align="center">
    <h1>login登录子组件</h1>
    <h2>图标容器div必须指定宽高，否则不显示</h2>
    <div id="echartContainer"
         style="width:500px; height:500px">
    </div>
    <div id="echartContainer2"
         style="width:500px; height:500px">
    </div>

    <div id="main" style="width:500px; height:500px"></div>
  </div>
</template>

<script>
  //引入echarts
  var echarts = require('echarts')
  export default {
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echartContainer'), 'light');
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
          // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
          dimensions: ['DEPT_NAME', 'DEPT_NO'],
          source: [
            //   { "DEPT_NO": 1, "DEPT_NAME": "dc1" },
            //   { "DEPT_NO": 2, "DEPT_NAME": "dc2" }
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
          {type: 'pie'}
        ]
      })


      //第二张图
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById('echartContainer2'), 'light');
      myChart2.setOption({
        dataset: {
          source: [
            // ['DEPT_NO', 'DEPT_NAME'],
            //   { "DEPT_NO": 1, "DEPT_NAME": "dc1" },
            //   { "DEPT_NO": 2, "DEPT_NAME": "dc2" }
          ]
        },
        grid: {containLabel: true},
        xAxis: {},
        yAxis: {type: 'category'},
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'DEPT_NO',
              // Map the "product" column to Y axis
              y: 'DEPT_NAME'
            }
          }
        ]
      })

      //异步加载数据
      const axios = require('axios');
      axios
        .get('http://127.0.0.1:18001/jdbc/test/queryDept')
        .then(response => {
          // alert("success")
          //给1饼图放数据
          myChart.setOption({
            dataset: {
              source: response.data
            }
          })
          //给2横柱状图放数据
          myChart2.setOption({
            dataset: {
              source: response.data
            }
          })

        })
        .catch(error => {
            alert('无法获取DEPT数据')
            this.errored = true
          }
        )
        .finally(() => this.loading = false)


      // 处理点击事件并且跳转到相应的百度搜索页面
      myChart.on('click', function (params) {
        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
      });



      


    }
  }

</script>

<style scoped>
  /*加上scoped只应用与当前子组件,不会全局应用*/
  /**
     * 普通的style只能写普通的style css样式
      若想用scss或less,加lang属性
      详见register.vue
     */
  div {
    color: #00ffff;
  }
</style>
